<template>
	<el-main>
		<div class="tips-default-box" v-html="tipsTitle"></div>
		<div style="margin-top: 24px;">
			<el-button type="primary" @click="$tours['myTour'].start()">
				<i class="el-icon-question"></i>
				打开引导
			</el-button>
		</div>
		<v-tour
			v-if="isShow"
			name="myTour" 
			:options="myOptions" 
			:callbacks="myCallback" 
			:steps="steps">
		</v-tour>
	</el-main>
</template>

<script>
	export default {
		name: 'Guide',
		data () {
			return {
				tipsTitle: '本示例使用的是<a href="https://github.com/pulsardev/vue-tour" target="_blank">vue-tour</a>，作为引导提示插件',
				isShow: false,
				steps: [
					{
						target: '[data-v-step="1"]',
						content: '第一步，这里可设置锁屏',
						params: {
							placement: 'bottom'
						}
					},
					{
						target: '[data-v-step="2"]',
						content: '第二步，这里可刷新页面',
						params: {
							placement: 'bottom'
						}
					},
					{
						target: '[data-v-step="3"]',
						content: '第三步，这里可设置全屏',
						params: {
							placement: 'bottom'
						}
					},
					{
						target: '[data-v-step="4"]',
						content: '最后一步，这里可查看联系信息',
						params: {
							placement: 'left'
						}
					}
				],
				myOptions: {
					useKeyboardNavigation: false, // 是否可用键盘来控制前进后退
					labels: { // 提示按钮
						buttonSkip: '退出',  
						buttonPrevious: '上一步',
						buttonNext: '下一步',
						buttonStop: '结束'
					}
				},
				myCallback: {
					onStart: this.onStart, // 在您开始游览时调用
					onStop: this.onStop, // 停止游览时调用
					onPreviousStep: this.onPreviousStep, // 转到上一步时调用
					onNextStep: this.onNextStep // 进行下一步时调用
				}
			}
		},
		created() {
			this.isShow = true;
		},
		mounted() {
			this.$tours['myTour'].start();
		},
		methods: {
			// 开始调用
			onStart() {
				return false;
			},
			// 停止调用
			onStop() {
				console.log("已停止");
			},
			// 上一步调用
			onPreviousStep(currentStep) {
				console.log(currentStep);
			},
			// 下一步调用
			onNextStep(currentStep) {
				console.log(currentStep);
			}
		}
	}
</script>
